<template>
  <div>
    <el-dialog v-drag :title="!dataForm.goodsId ? '新增商品' : '修改商品'" width="55%" :close-on-click-modal="false"
      :visible.sync="visible">
      <!-- 步骤条 -->
      <el-steps :space="200" :active="activeIndex - 0" align-center finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="库存信息"></el-step>
        <el-step title="价格信息"></el-step>
        <el-step title="GSP设置"></el-step>
        <el-step title="拆零设置"></el-step>
        <el-step title="提成设置"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品说明"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <el-form :model="dataForm" :inline="true" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
        label-width="80px">
        <el-tabs :tab-position="tabPosition" v-model="activeIndex" style="margin-top: 25px"
          :before-leave="beforeLeaveTab" @tab-click="tabClick">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品分类" prop="cateList">
              <el-cascader size="mini" placeholder="请选择分类"
                v-model="dataForm.cateList"
                expand-trigger="hover"
                :options="cateList" filterable clearable
                @change="handleCascaderChange"
                :props="casProps"
                :show-all-levels="true">
              </el-cascader>
            </el-form-item>
            <el-form-item label="产品编号" prop="goodsCode">
              <el-input size="mini" disabled v-model="dataForm.goodsCode" placeholder="产品编号"></el-input>
            </el-form-item>
            <el-form-item label="产品名称" prop="goodsName">
              <el-input size="mini" v-model="dataForm.goodsName" @blur="initPinYin()" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item label="条形码" prop="barCode">
              <el-input size="mini" type="number" v-model="dataForm.barCode" placeholder="条形码"></el-input>
            </el-form-item>
            <el-form-item label="通用名">
              <el-input size="mini" v-model="dataForm.genericName" placeholder="通用名"></el-input>
            </el-form-item>
            <el-form-item label="简拼" prop="pinyin">
              <el-input size="mini" v-model="dataForm.pinyin" placeholder="简拼"></el-input>
            </el-form-item>
            <el-form-item label="产地" prop="producingArea">
              <el-input size="mini" v-model="dataForm.producingArea" placeholder="产地"></el-input>
            </el-form-item>
            <el-form-item label="规格" prop="standard">
              <el-input size="mini" v-model="dataForm.standard" placeholder="规格"></el-input>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
              <!-- <el-input size="mini" v-model="dataForm.unit" placeholder="单位"></el-input> -->
              <el-select size="mini" @focus="getDicts('UNIT')"  v-model="dataForm.unit" clearable placeholder="请选择">
                <el-option v-for="item in units" :key="item.value" :label="item.label" :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="助记名">
              <el-input size="mini" v-model="dataForm.mnemonicName" placeholder="助记名"></el-input>
            </el-form-item>
            <el-form-item label="厂家" prop="produceFactory">
              <el-input size="mini" v-model="dataForm.produceFactory" placeholder="厂家"></el-input>
            </el-form-item>
            <el-form-item label="货位编号">
              <el-input size="mini" v-model="dataForm.positionCode" placeholder="货位编号"></el-input>
            </el-form-item>
            <el-form-item label="品牌名称" prop="brandName">
              <!-- <el-input v-model="dataForm.brandName" placeholder="品牌名称"></el-input> -->
              <el-select size="mini" v-model="dataForm.brandId" clearable placeholder="请选择">
                <el-option v-for="item in brands" :key="item.brandId" :label="item.brandName"
                  :value="item.brandId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="批准文号" prop="approvalNo">
              <el-input size="mini" v-model="dataForm.approvalNo" placeholder="批准文号"></el-input>
            </el-form-item>
            <el-form-item label="有效时长" prop="gspExpiryDate">
              <el-input size="mini" type="number" v-model="dataForm.gspExpiryDate" placeholder="有效时长(天)"></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="是否医保">
              <el-checkbox size="mini" v-model="dataForm.isMedicare"></el-checkbox>
            </el-form-item>
            <el-form-item label="定点医保">
              <el-checkbox size="mini" v-model="dataForm.isMustMedicare"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否中药">
              <el-checkbox size="mini" v-model="dataForm.isChinaDrug"></el-checkbox>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="库存信息" name="1">

            <el-form-item label="库存上线">
              <el-input size="mini" type="number" v-model="dataForm.stockUpperNum" placeholder="库存上线"></el-input>
            </el-form-item>
            <el-form-item label="库存下线">
              <el-input size="mini" type="number" v-model="dataForm.stockLowerNum" placeholder="库存下线"></el-input>
            </el-form-item>
            <el-form-item label="限购数量">
              <el-input size="mini" type="number" v-model="dataForm.limitBuyNum" placeholder="限购数量"></el-input>
            </el-form-item>
            <el-form-item label="总库存">
              <el-input size="mini" disabled v-model="dataForm.stockTotalNum" placeholder="总库存"></el-input>
            </el-form-item>
            <el-form-item label="采购数量">
              <el-input size="mini" type="number" disabled v-model="dataForm.purchaseTotalNum" placeholder="采购总数量"></el-input>
            </el-form-item>
            <el-form-item label="拆零数量">
              <el-input size="mini" type="number" disabled v-model="dataForm.splitTotalNum" placeholder="拆零数量"></el-input>
            </el-form-item>
            <el-form-item label="销售数量">
              <el-input size="mini" type="number" disabled v-model="dataForm.saleTotalNum" placeholder="销售数量"></el-input>
            </el-form-item>
            <el-form-item label="销毁数量">
              <el-input size="mini" type="number" disabled v-model="dataForm.destroyTotalNum" placeholder="销毁数量"></el-input>
            </el-form-item>
            <el-form-item label="盘盈数量">
              <el-input size="mini" type="number" disabled v-model="dataForm.checkInTotalNum" placeholder="盘盈数量"></el-input>
            </el-form-item>
            <el-form-item label="盘亏数量">
              <el-input size="mini" type="number" disabled v-model="dataForm.checkOutTotalNum" placeholder="盘亏数量"></el-input>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="价格信息" name="2">
            <el-form-item label="批发价" prop="wholesalePrice">
              <el-input size="mini" type="number" v-model="dataForm.wholesalePrice" placeholder="批发价"></el-input>
            </el-form-item>
            <el-form-item label="进价" prop="inPrice">
              <el-input size="mini" type="number" v-model="dataForm.inPrice" placeholder="进价"></el-input>
            </el-form-item>
            <el-form-item label="指导售价" prop="guidePrice">
              <el-input size="mini" type="number" v-model="dataForm.guidePrice" placeholder="指导零售价"></el-input>
            </el-form-item>
            <el-form-item label="当前售价" prop="salePrice">
              <el-input size="mini" type="number" v-model="dataForm.salePrice" placeholder="售价"></el-input>
            </el-form-item>
            <el-form-item label="会员价" prop="memberPrice">
              <el-input size="mini" type="number" v-model="dataForm.memberPrice" placeholder="会员价"></el-input>
            </el-form-item>
            <el-form-item label="最高价">
              <el-input size="mini" type="number" v-model="dataForm.topPrice" placeholder="最高价"></el-input>
            </el-form-item>
            <el-form-item label="最低价">
              <el-input size="mini" type="number" v-model="dataForm.lowestPrice" placeholder="最低价"></el-input>
            </el-form-item>
            <el-form-item label="折扣价">
              <el-input size="mini" type="number" v-model="dataForm.discountPrice" placeholder="折扣价"></el-input>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="GSP设置" name="3">
            <el-form-item label="药品类型">
              <!-- <el-input size="mini" v-model="dataForm.gspDrugType" placeholder="药品类型"></el-input> -->
              <el-select size="mini" @focus="getDicts('DRUG_TYPE')" v-model="dataForm.gspDrugType"  clearable placeholder="请选择">
                <el-option v-for="item in gspDrugTypes " :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="养护类型">
              <!-- <el-input size="mini" v-model="dataForm.gspMaintenanceType" placeholder="养护类型"></el-input> -->
              <el-select size="mini" @focus="getDicts('MAINTEN_TYPE')" v-model="dataForm.gspMaintenanceType"  clearable placeholder="请选择">
                <el-option v-for="item in gspMaintenanceTypes " :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="养护理由">
              <!-- <el-input size="mini" v-model="dataForm.gspMaintenanceReason" placeholder="养护理由"></el-input> -->
              <el-select size="mini" @focus="getDicts('MAINTEN_REASON')" v-model="dataForm.gspMaintenanceReason"  clearable placeholder="请选择">
                <el-option v-for="item in gspMaintenanceReasons " :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="剂型" prop="dosageForm">
              <!-- <el-input size="mini" v-model="dataForm.dosageForm" placeholder="剂型"></el-input> -->
              <el-select size="mini" @focus="getDicts('DOSAGE_FORM')" v-model="dataForm.dosageForm"  clearable placeholder="请选择">
                <el-option v-for="item in dosageForms" :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="验收属性">
              <!-- <el-input size="mini" v-model="dataForm.gspAcceptProp" placeholder="验收属性"></el-input> -->
              <el-select size="mini" @focus="getDicts('CHECK_ATTR')" v-model="dataForm.gspAcceptProp"  clearable placeholder="请选择">
                <el-option v-for="item in gspAcceptProps " :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="保存条件">
              <!-- <el-input size="mini" v-model="dataForm.gspSaveCondition" placeholder="保存条件"></el-input> -->
              <el-select size="mini" @focus="getDicts('SAVE_CONDITION')" v-model="dataForm.gspSaveCondition"  clearable placeholder="请选择">
                <el-option v-for="item in gspSaveConditions " :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="注册证号">
              <el-input size="mini" v-model="dataForm.gspRegisterNo" placeholder="注册证号"></el-input>
            </el-form-item>
            <el-form-item label="注册商标">
              <el-input size="mini" v-model="dataForm.gspRegisterTrademark" placeholder="注册商标"></el-input>
            </el-form-item>
            <el-form-item label="产品标准">
              <el-input size="mini" v-model="dataForm.gspStandard" placeholder="产品标准"></el-input>
            </el-form-item>
            <el-form-item label="产品性状">
              <el-input size="mini" v-model="dataForm.gspCharacter" placeholder="产品性状"></el-input>
            </el-form-item>
            <el-form-item label="功能分类">
              <!-- <el-input size="mini" v-model="dataForm.gspFuncType" placeholder="产品功能分类"></el-input> -->
              <el-select size="mini" @focus="getDicts('DRUG_FUNCTION')" v-model="dataForm.gspFuncType"  clearable placeholder="请选择">
                <el-option v-for="item in gspFuncTypes " :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="经营范围">
              <!-- <el-input size="mini" v-model="dataForm.gspScopeType" placeholder="产品经营范围分类"></el-input> -->
              <el-select size="mini" @focus="getDicts('SCOPE_TYPE')" v-model="dataForm.gspScopeType"  clearable placeholder="请选择">
                <el-option v-for="item in gspScopeTypes " :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="特殊药品">
              <!-- <el-input size="mini" v-model="dataForm.gspSpecialType" placeholder="特殊药品分类"></el-input> -->
              <el-select size="mini" @focus="getDicts('SPECIAL_TYPE')" v-model="dataForm.gspSpecialType"  clearable placeholder="请选择">
                <el-option v-for="item in gspSpecialTypes " :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="包装情况">
              <el-input size="mini" v-model="dataForm.gspPackageInner" placeholder="包装情况(内)"></el-input>
            </el-form-item>
            <el-form-item label="包装情况">
              <el-input size="mini" v-model="dataForm.gspPackageCenter" placeholder="包装情况(中)"></el-input>
            </el-form-item>
            <el-form-item label="包装情况">
              <el-input size="mini" v-model="dataForm.gspPackageOuter" placeholder="包装情况(外)"></el-input>
            </el-form-item>
            <el-form-item label="OTC分类">
              <!-- <el-input size="mini" v-model="dataForm.gspOctType" placeholder="OTC分类"></el-input> -->
              <el-select size="mini" @focus="getDicts('OTC_TYPE')" v-model="dataForm.gspOctType"  clearable placeholder="请选择">
                <el-option v-for="item in gspOctTypes " :key="item.itemId" :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-divider></el-divider>
            <el-form-item label="重点养护">
              <el-checkbox size="mini" v-model="dataForm.isKeyMaintenance"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否处方">
              <el-checkbox size="mini" v-model="dataForm.isRxDrug"></el-checkbox>
            </el-form-item>
            <el-form-item label="凭处方单">
              <el-checkbox size="mini" v-model="dataForm.isSaleRxDrug"></el-checkbox>
            </el-form-item>
            <el-form-item label="含麻黄碱">
              <el-checkbox size="mini" v-model="dataForm.isEphedrine"></el-checkbox>
            </el-form-item>
            <el-form-item label="退热药">
              <el-checkbox size="mini" v-model="dataForm.isColdMedicine"></el-checkbox>
            </el-form-item>
            <el-form-item label="进口药">
              <el-checkbox size="mini" v-model="dataForm.isImportedDrug"></el-checkbox>
            </el-form-item>
            <el-form-item label="中药饮片">
              <el-checkbox size="mini" v-model="dataForm.isDrugPiece"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否疫苗">
              <el-checkbox size="mini" v-model="dataForm.isVaccine"></el-checkbox>
            </el-form-item>
            <el-form-item label="含兴奋剂">
              <el-checkbox size="mini" v-model="dataForm.isStimulant"></el-checkbox>
            </el-form-item>
            <el-form-item label="保健品">
              <el-checkbox size="mini" v-model="dataForm.isHealthFood"></el-checkbox>
            </el-form-item>
            <el-form-item label="食品">
              <el-checkbox size="mini" v-model="dataForm.isFood"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否处方">
              <el-checkbox size="mini" v-model="dataForm.isRxDrug"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否GMP">
              <el-checkbox size="mini" v-model="dataForm.isGmp"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否监控">
              <el-checkbox size="mini" v-model="dataForm.isMonitor"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否积分">
              <el-checkbox size="mini" v-model="dataForm.isScore"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否折扣">
              <el-checkbox size="mini" v-model="dataForm.isDiscount"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否赠品">
              <el-checkbox size="mini" v-model="dataForm.isGift"></el-checkbox>
            </el-form-item>
            <el-form-item label="是否首营">
              <el-checkbox size="mini" v-model="dataForm.isFirstSale"></el-checkbox>
            </el-form-item>
            <el-form-item label="拆零药">
              <el-checkbox size="mini" v-model="dataForm.isSplit"></el-checkbox>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="拆零设置" name="4">
            <el-form-item label="能否拆零" class="split">
              <el-checkbox size="mini" v-model="dataForm.isCanSplit"></el-checkbox>
            </el-form-item>
            <br />
            <el-form-item label="每个拆为多少个" class="split">
              <el-input size="mini" type="number" v-model="dataForm.splitNum" placeholder="拆为多少个"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="拆零后药品单位" class="split">
              <el-select size="mini" v-model="dataForm.splitedUnit" clearable placeholder="请选择">
                <el-option v-for="item in units" :key="item.value" :label="item.label" :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="提成设置" name="5">
            <el-form-item class="commission" label="是否提成">
              <el-checkbox size="mini" v-model="dataForm.isCommission"></el-checkbox>
            </el-form-item>
            <br />
            <el-form-item class="commission" label="按药品销售毛利提成">
              <el-input size="mini" type="number" v-model="dataForm.commissionByRatio" placeholder="按药品销售毛利提成">
              </el-input>
              <span>%</span>
            </el-form-item>
            <br />
            <el-form-item class="commission" label="按销售金额提成">
              <el-input size="mini" type="number" v-model="dataForm.commissionBySaleAmount" placeholder="按销售金额提成">
              </el-input>
              <span>%</span>
            </el-form-item>
            <br />
            <el-form-item class="commission" label="每销售一件提成多少元">
              <el-input size="mini" type="number" v-model="dataForm.commissionBySaleNum" placeholder="每销售一件提成多少元">
              </el-input>
              <span>元</span>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name="6">
            <el-upload
              :action="uploadUrl"
              :on-preview="handleImgPreview"
              :on-remove="handleImgRemove"
              :on-success="handImgSuccess"
              :headers="headers"
              :file-list="dataForm.pics"
              :drag="false"
              :before-upload="handleBeforeUpload"
              list-type="picture"
              multiple name="file"
              :data="uploadData">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品说明:" name="7">
            <el-form-item label="产品效果">
              <quill-editor ref="effect" v-model="dataForm.effect" class="editor" :options="editorOption" />
            </el-form-item>
            <el-form-item label="备注信息:">
              <quill-editor ref="remark" v-model="dataForm.remark" class="editor" :options="editorOption" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="visible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="图片预览" :visible.sync="imgDialogVisible" width="50%">
      <img :src="previewPath" alt="">
    </el-dialog>
  </div>
</template>

<script>
  // import _ from 'loadash'
  const _ = require("lodash")
  export default {
    data() {
      return {
        visible: false,
        activeIndex: "0",
        tabPosition: 'left',
        //图片预览路径
        previewPath: '',
        imgDialogVisible: false,
        uploadUrl: 'http://localhost:99/api/common/upload',
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        headers: {
          Authorization: "Bearer " + this.$cookie.get('token'),
          token: this.$cookie.get('token')
        },
        uploadData: {
          file: ''
        },
        // 富文本编辑器配置
        editorOption: {
          placeholder: '请输入......'
        },
        cateList: [],
        units: [],
        brands: [],
        gspDrugTypes:[],
        gspMaintenanceTypes:[],
        gspAcceptProps:[],
        gspSaveConditions:[],
        gspFuncTypes: [],
        gspScopeTypes: [],
        gspSpecialTypes: [],
        gspOctTypes: [],
        gspMaintenanceReasons:[],
        dosageForms:[],
        casProps:{
          value: 'categoryId',
          label: 'catName',
          children: 'children'
        },
        dataForm: {
          goodsId: null,
          goodsCode: '',
          goodsName: '',
          barCode: '',
          genericName: '',
          pinyin: '',
          producingArea: '',
          standard: '',
          unit: '',
          mnemonicName: '',
          produceFactory: '',
          positionCode: '',
          brandId: null,
          approvalNo: '',
          gspExpiryDate: '',
          isMedicare: false,
          isMustMedicare: false,
          isChinaDrug: false,
          stockUpperNum: 0,
          stockLowerNum: 0,
          limitBuyNum: 0,
          stockTotalNum: 0,
          purchaseTotalNum: 0,
          splitTotalNum: 0,
          saleTotalNum: 0,
          destroyTotalNum: 0,
          checkInTotalNum: 0,
          checkOutTotalNum: 0,
          wholesalePrice: 0,
          inPrice: 0,
          guidePrice: 0,
          salePrice: 0,
          memberPrice: 0,
          topPrice: 0,
          lowestPrice: 0,
          discountPrice: 0,
          gspDrugType: '',
          gspMaintenanceType: '',
          gspMaintenanceReason: '',
          dosageForm: '',
          gspAcceptProp: '',
          gspSaveCondition: '',
          gspRegisterNo: '',
          gspRegisterTrademark: '',
          gspStandard: '',
          gspCharacter: '',
          gspFuncType: '',
          gspScopeType: '',
          gspSpecialType: '',
          gspPackageInner: '',
          gspPackageCenter: '',
          gspPackageOuter: '',
          gspOctType: '',
          isKeyMaintenance: false,
          isRxDrug: false,
          isSaleRxDrug: false,
          isEphedrine: false,
          isColdMedicine: false,
          isImportedDrug: false,
          isDrugPiece: false,
          isVaccine: false,
          isStimulant: false,
          isHealthFood: false,
          isFood: false,
          isRxDrug: false,
          isGmp: false,
          isMonitor: false,
          isScore: false,
          isDiscount: false,
          isGift: false,
          isFirstSale: false,
          isSplit: false,
          isCanSplit: false,
          splitedUnit: '',
          isCommission: false,
          commissionByRatio: 0,
          commissionBySaleAmount: 0,
          commissionBySaleNum: 0,
          effect: '',
          remark: '',
          cateList:[],
          pics:[]
        },
        curPic: {},
        dataRule: {
          goodsCode: [{
            required: true,
            message: '产品编号不能为空',
            trigger: 'blur'
          }],
          goodsName: [{
            required: true,
            message: '产品名称不能为空',
            trigger: 'blur'
          }],
          categoryId: [{
            required: true,
            message: '类别id不能为空',
            trigger: 'blur'
          }],
          cateList: [{
            required: true,
            message: '类别名称不能为空',
            trigger: 'blur'
          }],
          pinyin: [{
            required: true,
            message: '简拼不能为空',
            trigger: 'blur'
          }],
          producingArea: [{
            required: true,
            message: '产品区域不能为空',
            trigger: 'blur'
          }],
          standard: [{
            required: true,
            message: '规格不能为空',
            trigger: 'blur'
          }],
          unit: [{
            required: true,
            message: '单位不能为空',
            trigger: 'blur'
          }],
          wholesalePrice: [{
            required: true,
            message: '批发价不能为空',
            trigger: 'blur'
          }],
          inPrice: [{
            required: true,
            message: '进价不能为空',
            trigger: 'blur'
          }],
          guidePrice: [{
            required: true,
            message: '指导零售价不能为空',
            trigger: 'blur'
          }],
          salePrice: [{
            required: true,
            message: '售价不能为空',
            trigger: 'blur'
          }],
          memberPrice: [{
            required: true,
            message: '会员价不能为空',
            trigger: 'blur'
          }],
          barCode: [{
            required: true,
            message: '条形码不能为空',
            trigger: 'blur'
          }],
          approvalNo: [{
            required: true,
            message: '批准文号不能为空 ',
            trigger: 'blur '
          }],
          produceFactory: [{
            required: true,
            message: '厂家不能为空',
            trigger: 'blur'
          }],
          dosageForm: [{
            required: true,
            message: '剂型不能为空',
            trigger: 'blur'
          }],
          gspExpiryDate: [{
            required: true,
            message: '有效时长(天)不能为空',
            trigger: 'blur'
          }],
        }
      }
    },
    computed: {
      //三级分类id
      categoryId() {
        if (this.dataForm.cateList.length === 2) {
          return this.dataForm.cateList[1]
        }else if (this.dataForm.cateList.length === 3) {
           return this.dataForm.cateList[2]
        }
        return null
      },
      brandId() {
        if (this.dataForm.brandValue) {
          return this.dataForm.brandValue
        }
      },
    },
    created() {
      //获取商品分类
      this.getCateList()
      this.getBrands();
    },
    methods: {
      init(goodsId) {
        this.dataForm.goodsId = goodsId
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.goodsId) {
            this.$http({
              url: `/goods/goods/info/${this.dataForm.goodsId}`,
              method: 'get',
              params: this.$http.adornParams()
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                let addForm = data.goods

                addForm.isMedicare = addForm.isMedicare === 1? true:false
                addForm.isMustMedicare = addForm.isMustMedicare === 1? true:false
                addForm.isChinaDrug = addForm.isChinaDrug === 1? true:false
                addForm.isKeyMaintenance = addForm.isKeyMaintenance === 1? true:false
                addForm.isRxDrug = addForm.isRxDrug === 1? true:false
                addForm.isSaleRxDrug = addForm.isSaleRxDrug === 1? true:false
                addForm.isEphedrine = addForm.isEphedrine === 1? true:false
                addForm.isColdMedicine = addForm.isColdMedicine === 1? true:false
                addForm.isImportedDrug = addForm.isImportedDrug === 1? true:false
                addForm.isDrugPiece = addForm.isDrugPiece === 1? true:false
                addForm.isVaccine = addForm.isVaccine === 1? true:false
                addForm.isStimulant = addForm.isStimulant === 1? true:false
                addForm.isHealthFood = addForm.isHealthFood === 1? true:false
                addForm.isFood = addForm.isFood === 1? true:false
                addForm.isRxDrug = addForm.isRxDrug === 1? true:false
                addForm.isGmp = addForm.isGmp === 1? true:false
                addForm.isMonitor = addForm.isMonitor === 1? true:false
                addForm.isScore = addForm.isScore === 1? true:false
                addForm.isDiscount = addForm.isDiscount === 1? true:false
                addForm.isGift = addForm.isGift === 1? true:false
                addForm.isFirstSale = addForm.isFirstSale === 1? true:false
                addForm.isSplit = addForm.isSplit === 1? true:false
                addForm.isCanSplit = addForm.isCanSplit === 1? true:false
                addForm.isCommission = addForm.isCommission === 1? true:false

                this.dataForm = addForm


              }
            })
          }else{
            this.getMaxCode()
          }
        })
      },
      async getMaxCode() {
        const res = await this.$http({
          url: '/goods/goods/getMaxCode',
          method: 'get'
        })
        let data = res.data
        if (data && data.code === 0) {
          this.dataForm.goodsCode = data.data
        }
      },
      async getBrands() {
        const res = await this.$http({
          url: '/goods/goodsbrand/getBrands',
          method: 'get'
        })
        let data = res.data
        if (data && data.code === 0) {
          this.brands = data.data
        }
      },
      async getCateList() {
        const res = await this.$http({
          url: `/goods/goodscategory/getTree`,
          method: 'get',
          params: this.$http.adornParams({'level': 3})
        })
        let data = res.data
        if (data && data.code === 0) {
          this.cateList = data.data;
        }
      },
      async getDicts(type) {
        const res = await this.$http({
          url: '/base/basedict/getDict',
          method: 'get',
          params: this.$http.adornParams({
            'code': type
          })
        })
        let data = res.data
        if (data && data.code === 0) {
          if(type === 'DRUG_TYPE'){
            this.gspDrugTypes = data.data
          }else if(type === 'MAINTEN_TYPE'){
            this.gspMaintenanceTypes = data.data
          }else if(type === 'CHECK_ATTR'){
            this.gspAcceptProps = data.data
          }else if(type === 'SAVE_CONDITION'){
            this.gspSaveConditions = data.data
          }else if(type === 'DRUG_FUNCTION'){
            this.gspFuncTypes = data.data
          }else if(type === 'SCOPE_TYPE'){
            this.gspScopeTypes = data.data
          }else if(type === 'SPECIAL_TYPE'){
            this.gspSpecialTypes = data.data
          }else if(type === 'OTC_TYPE'){
            this.gspOctTypes = data.data
          }else if(type === 'UNIT'){
            this.units = data.data
          }else if(type === 'MAINTEN_REASON'){
            this.gspMaintenanceReasons = data.data
          }else if(type === 'DOSAGE_FORM'){
            this.dosageForms = data.data
          }

        }
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate(async (valid) => {
          if (valid) {
            let addForm = _.cloneDeep(this.dataForm)
            addForm.categoryName = this.categoryName
            addForm.categoryId = this.categoryId
            addForm.brandId = this.brandId ? this.brandId : 0
            addForm.isMedicare = addForm.isMedicare ? 1:0
            addForm.isMustMedicare = addForm.isMustMedicare ? 1:0
            addForm.isChinaDrug = addForm.isChinaDrug ? 1:0
            addForm.isKeyMaintenance = addForm.isKeyMaintenance ? 1:0
            addForm.isRxDrug = addForm.isRxDrug ? 1:0
            addForm.isSaleRxDrug = addForm.isSaleRxDrug ? 1:0
            addForm.isEphedrine = addForm.isEphedrine ? 1:0
            addForm.isColdMedicine = addForm.isColdMedicine ? 1:0
            addForm.isImportedDrug = addForm.isImportedDrug ? 1:0
            addForm.isDrugPiece = addForm.isDrugPiece ? 1:0
            addForm.isVaccine = addForm.isVaccine ? 1:0
            addForm.isStimulant = addForm.isStimulant ? 1:0
            addForm.isHealthFood = addForm.isHealthFood ? 1:0
            addForm.isFood = addForm.isFood ? 1:0
            addForm.isRxDrug = addForm.isRxDrug ? 1:0
            addForm.isGmp = addForm.isGmp ? 1:0
            addForm.isMonitor = addForm.isMonitor ? 1:0
            addForm.isScore = addForm.isScore ? 1:0
            addForm.isDiscount = addForm.isDiscount ? 1:0
            addForm.isGift = addForm.isGift ? 1:0
            addForm.isFirstSale = addForm.isFirstSale ? 1:0
            addForm.isSplit = addForm.isSplit ? 1:0
            addForm.isCanSplit = addForm.isCanSplit ? 1:0
            addForm.isCommission = addForm.isCommission ? 1:0

            const res = await this.$http({
              url: `/goods/goods/${!this.dataForm.goodsId ? 'save' : 'update'}`,
              method: 'post',
              data: this.$http.adornData(addForm)
            })
            let data = res.data
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          }
        })
      },
      handleCascaderChange() {
        //如果选中
        let len = this.dataForm.cateList.length
        if (len === 1) {
          this.dataForm.cateList = []
        }
      },
      //切换tab
      beforeLeaveTab(activeName, oldActiveName) {
        // if (oldActiveName === '0' && this.dataForm.cateList.length !== 2) {
        //   this.$message.warning('不能切换!请选择二级分类!');
        //   return false
        // }
        // return true
      },
      tabClick() {
        // if (this.activeIndex === '1') {
        //   //动态参数
        //   this.getGoodsParams('many')
        // } else if (this.activeIndex === '2') {
        //   //静态参数
        //   this.getGoodsParams('only')
        // }
      }, //图片预览
      handleImgPreview(file, fileList) {
        this.previewPath = file.url
        this.imgDialogVisible = true
      },
      //图片删除
      handleImgRemove(file) {
        //找到索引
        const index = this.dataForm.pics.findIndex(x =>
          x.url === file.url
        )
        //根据索引删除
        this.dataForm.pics.splice(index, 1)
      },
      //上传之前
      handleBeforeUpload(file){
        this.curPic = {
          "name": file.name,
          "size": file.size,
          "type": file.type,
          "uid": file.uid,
          "status": 1,
        }
      },
      //上传成功
      handImgSuccess(response) {
        if (response.code === 0) {
          this.curPic.url = response.data
          this.dataForm.pics.push(this.curPic)
        }
      },
      initPinYin(){
        let name = this.dataForm.goodsName
        this.$pinyin.setOptions({checkPolyphone:false,charCase:0});
        this.dataForm.pinyin = this.$pinyin.getCamelChars(name)
      }
    }
  }
</script>
<style lang="less" scoped>
  .el-dialog__body {
    padding: 0px 20px 30px 20px;
  }

  .el-form-item__label {
    white-space: pre-line;
  }

  .el-divider {
    margin: 0;
    padding: 0;
  }

  .commission {
    width: 380px;

    /deep/ .el-form-item__label {
      width: 180px !important;
    }

    /deep/ .el-form-item__content {
      display: inline-flex !important;
    }
  }

  .split {
    width: 320px;

    /deep/ .el-form-item__label {
      width: 120px !important;
    }

    /deep/ .el-form-item__content {
      display: inline-flex !important;
    }
  }
  .editor {
    line-height: normal !important;
  }
  // .ql-snow .ql-tooltip[data-mode=link]::before {
  //   content: "请输入链接地址:";
  // }
  // .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  //     border-right: 0px;
  //     content: '保存';
  //     padding-right: 0px;
  // }

  // .ql-snow .ql-tooltip[data-mode=video]::before {
  //     content: "请输入视频地址:";
  // }

  // .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  // .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  //   content: '14px';
  // }
  // .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  // .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  //   content: '10px';
  // }
  // .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  // .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  //   content: '18px';
  // }
  // .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  // .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  //   content: '32px';
  // }

  // .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  // .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  //   content: '文本';
  // }
  // .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  // .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  //   content: '标题1';
  // }
  // .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  // .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  //   content: '标题2';
  // }
  // .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  // .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  //   content: '标题3';
  // }
  // .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  // .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  //   content: '标题4';
  // }
  // .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  // .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  //   content: '标题5';
  // }
  // .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  // .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  //   content: '标题6';
  // }

  // .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  // .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  //   content: '标准字体';
  // }
  // .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  // .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  //   content: '衬线字体';
  // }
  // .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  // .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  //   content: '等宽字体';
  // }
</style>
